<template>
	<section>
		<div class="week">
			<span v-show="fatherComponent=='home'">周{{capitalizate}}</span>
			<span v-show="fatherComponent=='subject'">题目{{itemNum}}</span>
		</div>
		<div v-show="fatherComponent=='home'">
			<div class="home_logo item_container_style"></div>
			<router-link to="subject" class="start button_style"></router-link>
		</div>
		<div v-show="fatherComponent == 'subject'" >
			<div class="item_back item_container_style">
				<div class="item_list_container" v-if="itemDetail.length > 0">
					<header class="item_title">{{itemDetail[itemNum-1].topic_name}}</header>
					<ul>
						<li class="item_list"  v-for="(item, index) in itemDetail[itemNum-1].topic_answer"  @click="choosed(index,item.topic_answer_id)">
							<span class="option_style"  v-bind:class="{'has_choosed':choosedNum==index}">{{chooseType(index)}}</span> 
							<span class="option_detail">{{item.answer_name}}</span>
						</li>
					</ul>
				</div>
			</div>
			<span class="next_item button_style" @click="nextItem()" v-if="itemNum < itemDetail.length"></span>
			<span class="submit_item button_style" v-else @click="submitAnswer"></span>
		</div>
	</section>	
</template>
<script>
import moment from 'moment'

import {mapActions, mapGetters} from 'vuex'
export default {
	name: 'App',
	data() {
		return {
			week: moment().get('weekday'), //moment获取当天周几
			itemId: null, //题目ID
			choosedNum: null, //选中答案索引
			choosedId: null, //选中答案id
		}
	},
	props: ['fatherComponent'],
	created() {
		//body背景图片
		document.body.style.backgroundImage = 'url(/static/images/bg.jpg)';
	},
	methods: {
		...mapActions([
  			'addNum', 'initializeData',
  		]),		
		//选中的答案
		choosed:function(type,id){
			this.choosedNum = type
			this.choosedId=id
		},
 		//索引0-3对应答案A-B
	  	chooseType: type => {
	  		switch(type){
	  			case 0: return 'A';
	  			case 1: return 'B';
	  			case 2: return 'C';
	  			case 3: return 'D';
	  		}
	  	},
	  	nextItem:function(){
			if (this.choosedNum !== null) {
	  			this.choosedNum = null;
	  			//保存答案, 题目索引加一，跳到下一题
	  			this.addNum(this.choosedId)
  			}else{
  				alert('您还没有选择答案哦')
  			}	  		
	  	},
		//到达最后一题，交卷，请空定时器，跳转分数页面
	  	submitAnswer(){
	  		if (this.choosedNum !== null) {
	  			this.addNum(this.choosedId)
	  			clearInterval(this.timer)
	  			this.$router.push('score')
  			}else{
  				alert('您还没有选择答案哦')
  			}
	  	},	  	

	},
	computed: {
		...mapGetters([
			'itemNum', // 第几题
			'itemDetail'// 题目列表
		]), // 动态计算属性，相当于this.$store.getters.resturantName
		capitalizate() { //周转换为大写
			var _this = this
			let list = ["一", "二", "三", "四", "五", "六", "七"];
			return list[_this.week - 1];
		}
	}
}
</script>
<style lang="less">
	body{
	width: 100%;
	height: 100%;
	background-size: 100%;
	.week{
	    background: url(/static/images/week.png) no-repeat;
		position: absolute;
		height: 7.35rem;
		width: 3.25rem;
		top: -1.3rem;
		right: 1.6rem;
		background-size: 100% 100%;
		z-index: 10;
		span{
			position: absolute;
			left: 0.48rem;
			bottom: 1.1rem;
			height: 0.7rem;
			width: 2.5rem;
			font-size: 0.6rem;
			font-family: '黑体';
			font-weight: 600;
			color: #a57c50;
			text-align: center;
		}
	}
	.home_logo {
	    background-image: url(/static/images/1-2.png);
	    background-size: 13.142rem 100%;
	    background-position: 100%;
	}
	.item_container_style {
	    height: 11.625rem;
	    width: 13.15rem;
	    background-repeat: no-repeat;
	    position: absolute;
	    top: 4.1rem;
	    left: 1rem;
	}
	.start {
    	background-image: url(/static/images/btn1.png);
    	background-size: 100%;
	}
	.button_style {
	    display: block;
	    height: 2.1rem;
	    width: 4.35rem;
	    border-radius: 5px;
	    position: absolute;
	    top: 16.5rem;
	    left: 50%;
	    margin-left: -2.4rem;
	    background-repeat: no-repeat;
	}
	.item_back {
	    background-image: url(/static/images/2-1.png);
	}
	.next_item {
    	background-image: url(/static/images/2-2.png);
	}
	.button_style, .item_back {
	    background-size: 100% 100%;
	}
	.item_list_container {
	    position: absolute;
	    height: 7rem;
	    width: 8rem;
	    top: 1.6rem;
	    left: -.8rem;
	    -webkit-font-smoothing: antialiased;
	}
	.item_title {
	    font-size: .65rem;
	    color: #fff;
	    line-height: .7rem;
	    margin-left: 3.8rem;
	    width: 100%;
	    margin-top: 0.22rem;
	}
	.item_list {
	    font-size: 0;
	    margin-top: .4rem;
	    width: 10rem;
	}
	.item_list .option_style {
	    height: .725rem;
	    width: .725rem;
	    border: 1px solid #fff;
	    border-radius: 50%;
	    line-height: .8rem;
	    text-align: center;
	    margin-right: .3rem;
	    font-size: .5rem;
	    font-family: Arial;
	}
	.item_list span {
	    display: inline-block;
	    font-size: .6rem;
	    color: #fff;
	    vertical-align: middle;
	}
	.item_list .has_choosed {
	    background-color: #ffd400;
	    color: #575757;
	    border-color: #ffd400;
	}
	.submit_item {
	    background-image: url(/static/images/3-1.png);
	}
	.button_style {
	    display: block;
	    height: 2.1rem;
	    width: 4.35rem;
	    position: absolute;
	    top: 16.5rem;
	    left: 50%;
	    margin-left: -2.4rem;
	    background-repeat: no-repeat;
	}


}
</style>